<template>
    <div>
        <div class="box">
            <div class="content">
                <div class="login-wrapper">
                    <h1>注册</h1>
                    <div class="login-form">
                        <div class="username form-item">
                            <span>用户名</span>
                            <input v-model="registerObj.username" type="text" class="input-item">
                        </div>
                        <div class="password form-item">
                            <span>密码</span>
                            <input v-model="registerObj.password" type="password" class="input-item">
                        </div>
                        <div  class="password form-item">
                            <span>邮箱</span>
                            <input v-model="registerObj.email" type="text" class="input-item">
                        </div>
                        <div class="password form-item">
                            <div class="flex justify-between">
                                <span>验证码</span>
                                <button @click="sendVerifyCode">点击发送验证码</button>
                            </div>
                            <input v-model="registerObj.verifyCode" type="text" class="input-item">
                        </div>
                        <button class="login-btn" @click="sendRegister">注 册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div>
        <input v-model="registerObj.username" min="7" max="14" type="text" placeholder="用户名">
        <input v-model="registerObj.password" min="7" max="10" type="text" placeholder="密码">
        <input v-model="registerObj.email" min="7" max="10" type="text" placeholder="邮箱">
        <input v-model="registerObj.verifyCode" type="text" placeholder="验证码">
        <button @click="sendVerifyCode">发送验证码</button>
        <button @click="sendRegister">注册</button>
    </div> -->
</template>

<script setup>
import { inject, reactive } from 'vue';
import { postRegister, postSendVercode } from "@/api/user";
import { useRouter } from 'vue-router';
const registerObj = reactive({
    username: "",
    password: "",
    email: "",
    verifyCode: ""
})
const router = useRouter()
const showTips = inject('$showTips')

const registerValid = function () {
    for (let i in registerObj) {
        if (registerObj[i] == null) {
            return false;
        }
    }
    return true
}

const sendRegister = function () {
    // if(!registerValid()){
    //     return;
    // }
    postRegister(registerObj).then(res => {
        showTips({ content: res.desc })
        if(res.status == 200){
            router.push('/login');
        }
    })
}

const sendVerifyCode = function () {
    postSendVercode(registerObj)
}

</script>

<style src="../../assets/css/loginStyle.css" scoped>

</style>